کاربران یک وب سایت مهمترین هدف از ایجاد و راه اندازی یک وب سایت هستند ،بنابر این طراحی وب سایت با این هدف که تمامی کاربران بتوانند به راحتی از وب سایت استفاده کنند همیشه باید مدنظر یک طراح وب سایت قرار گیرد.سرعت بارگذاری صفحات وب یکی از مهمترین نکاتی است که باید برای راحتی یک بازدید کننده در نظر گرفته شود ، به خصوص در کشورهایی که تعداد بسیار زیادی از مشترکان اینترنت هنوز از سیستم Dial Up برای اتصال به اینترنت استفاده می کنند و دارای محدودیت سرعت هستند.

تصاویر مورد استفاده در طراحی وب سایت ، نحوه استفاده از آنها و فرمت تصاویر می توانند نقش تعیین کننده ای در زمان بارگزاری صفحات وب سایت داشته باشند ، بنابراین بهینه سازی تصاویر و استفاده از تکنیکهای CSS برای کاهش استفاده از تصاویر در صفحات وب می تواند به سریعتر شدن وب سایت کمک کند.در این رابطه می توانید مطلب زیر را نیز مطالعه کنید .

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

باید به این نکته توجه داشته باشید که کاهش زمان بارگذاری صفحات وب سایت یکی از فاکتورها برای تعیین سطح (Page Rank ) توسط موتورهای جستجو مانند گوگل هستند

Css Sprite چیست و چگونه می تواند به کاهش مصرف پهنای باند و افزایش سرعت وب سایت کمک کند؟

مرورگرها برای بارگذاری هر کدام از اجزای صفحه (مانند تصاویر ، فایل های CSS و جاوا اسکریپت و…) یک درخواست (HTTP-Request) به سرور ( Server ) ارسال می‌کند تا سرور ، فایل درخواستی را برای مرورگر بفرستد. ارسال هر در خواست و دریافت پاسخ آن ، بخشی از زمان بارگذاری صفحه است.

هرچه تعداد درخواست ( HTTP-Request ) کمتر باشد ، زمان بارگذاری صفحه نیز کمترخواهد شد . برای کم کردن تعداد درخواست ها از سرور ( Server ) میتوانید فایلهای جاوااسکریپت ( JavaScript ) ، سی اس اس ( CSS ) با موضوعیت یکسان را با یکدیگر ادغام کنید .

برای ادغام و یکسان سازی تصاویر نیز می توانید از تکنیک فوق العاده CSS Sprite که در این مطلب به توضیح آن خواهیم پرداخت استفاده نمائید.این تکنیک در دکمه ها (Button ) ، آیکون ها ( Icon ) ، بنرها (Banner ) و ..  بسیاری موارد دیگر مورد استفاده قرار میگیرد . با استفاده از این تکنیک می توان تاخیر به وجود آمده در هنگام Roll Over شدن تصاویر که از زمان لازم برای درخواست و پاسخ سرور به وجود می آید را نیز بر طرف نمود . ( این مورد در دکمه ( Button ) موجود در صفحه قبل از استفاده از تکنیک CSS Sprite قابل ملاحظه است )  می توانید صفحات مربوط به این آموزش را ملاحظه کنید.

DEMO

برای این خود آموز در قسمت آیکون ها از تصویر با فرمت JPG و کیفیت ۵۰% و برای دکمه ( Button )  از فرمت GIF با کیفیت ۲۵۶ رنگ استفاده شده است. سرعت اینترنت مورد استفاده برای تست ۵۱۲ kb است و از مرورگر فایرفاکس ( Fire Fox ) و افزونه ( Add-ons  Fire Bug )  برای تعیین سرعت بارگذاری صفحه استفاده شده است.

قبل از استفاده از تکنیک CSS Sprite

/* Sprite Style */
.icon { width:70px; height:70px; float:right;}
.rollOverButton { background:url(cssSpriteButton.gif) no-repeat center center;}
.rollOverButton:hover { background:url(cssSpriteButtonHover.gif) no-repeat center center;}

در نمونه اول ( قبل از استفاده از تکنیک CSS Sprite ) که کدهای css مربوط به آن را در بالا ملاحظه میکنید ، از روش معمول برای ایجاد حالت Roll Over بر روی دکمه ( Button ) و از تگ img برای قرار دادن تصاویر درون صفحه استفاده شده است . کلیه تصاویر به صورت مجزا درون صفحات وب مورد استفاده قرار گرفته اند .